<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说转有声书APP原型</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            padding: 2rem;
        }
        .prototype-title {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary-color);
        }
        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }
        .prototype-item {
            display: flex;
            flex-direction: column;
        }
        .prototype-frame {
            width: 100%;
            height: 500px;
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .prototype-label {
            margin-top: 0.5rem;
            text-align: center;
            font-weight: 500;
        }
        .prototype-description {
            color: var(--text-secondary);
            font-size: 0.875rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="prototype-title">小说转有声书APP原型设计</h1>
        
        <div class="card mb-4">
            <h2>项目说明</h2>
            <p>本原型展示了一款基于AI技术的小说转有声书应用，能够将文本小说智能转换为多角色、情感丰富的有声内容。</p>
            <p>核心功能包括：小说导入、角色识别与配音、情感与语调控制、音频生成与管理、播放器功能等。</p>
            <p>下方展示了应用的主要页面，点击各页面可查看更多细节。</p>
        </div>
        
        <div class="prototype-grid">
            <div class="prototype-item">
                <iframe src="home.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">首页</h3>
                <p class="prototype-description">推荐内容、继续听书、最近添加</p>
            </div>
            
            <div class="prototype-item">
                <iframe src="library.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">库页</h3>
                <p class="prototype-description">已导入小说、已生成有声书</p>
            </div>
            
            <div class="prototype-item">
                <iframe src="import.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">导入页</h3>
                <p class="prototype-description">文件导入、网络导入</p>
            </div>
            
            <div class="prototype-item">
                <iframe src="edit.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">编辑页</h3>
                <p class="prototype-description">角色配音设置、预览调整</p>
            </div>
            
            <div class="prototype-item">
                <iframe src="player.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">播放页</h3>
                <p class="prototype-description">播放控制、章节列表</p>
            </div>
            
            <div class="prototype-item">
                <iframe src="settings.html" class="prototype-frame"></iframe>
                <h3 class="prototype-label">设置页</h3>
                <p class="prototype-description">账号、订阅、偏好设置</p>
            </div>
        </div>
    </div>
</body>
</html> 